<template>
  <div>
    <el-form ref="loginForm" :model="loginForm" label-width="90px" class="login-box">
      <h3 class="login-title">欢迎登录</h3>
      <el-form-item label="账号" prop="uName">
        <el-input type="text" placeholder="请输入账号" v-model="loginForm.uName"/>
      </el-form-item>
      <el-form-item label="密码" prop="uPwd">
        <el-input type="password" placeholder="请输入密码" v-model="loginForm.uPwd"/>
      </el-form-item>
      <el-form-item>
        <el-space wrap :size="30">
          <el-button type="primary" v-on:click="classify()">登录</el-button>
          <el-button type="warning" v-on:click="onReset()">重置</el-button>
          <el-button type="primary" v-on:click="onRegis()">注册</el-button>
          <el-button type="primary" v-on:click="onRetrieval()">找回密码</el-button>
          <br>
          <input type="radio" name="test" v-for="(item,index) in list" :value="item.value" :checked="item.isCheck"
                 @change="changeInput(index)">
          <br>
          <br>
          <div v-text="user"></div>
          <div v-text="rent"></div>
          <div v-text="admin"></div>
          <!--          用户       租户      管理员-->
          <!--          <button @click="test">获取选中的值</button>-->
        </el-space>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {ElMessage} from 'element-plus'
import request from "@/util/request"
import {useRoute} from 'vue-router'
import router from "@/router";

export default {
  setup() {
    const route = useRoute()
    return {route}
  },
  name: 'Test',
  data() {
    return {
      user: '用户',
      rent: '租户',
      admin: '管理员',
      loginBg: 'url(' + require('../assets/login.jpg') + ')',
      loginForm: {
        uName: '',
        uPwd: ''
      },
      list: [{value: '用户', isCheck: false}, {value: '租户', isCheck: false}, {value: '管理员', isCheck: false}]
    }
  },
  methods: {
    classify() {

      router.push('/Index')
    },
    // 登录提交
    onSubmit() {
      //+ this.loginForm.uName + '/' + this.loginForm.uPwd
      request.post('http://localhost:8090/user/userLogin/', {
        userName: this.loginForm.uName,
        password: this.loginForm.uPwd
      }).then(response => {
        if (response.data.code === "200") {
          ElMessage({
            showClose: true,
            message: '登录成功',
            type: 'success'
          })
          this.$store.commit("setValue",response.data.data)
          router.push('/home')
        } else {
          ElMessage.error('登录失败')
        }
      })
    },
    ten() {
      //+ this.loginForm.uName + '/' + this.loginForm.uPwd
      let config = {
        headers: {
          "Content-Type": "multipart/form-data"
        }
      };
      let formData = new FormData();
      formData.append("tenantName", this.loginForm.uName)
      formData.append("password", this.loginForm.uPwd)
      request.post('http://localhost:8090/tenant/login/', formData, config).then(response => {
        if (response.data.code === "200") {
          ElMessage({
            showClose: true,
            message: '登录成功',
            type: 'success'
          })
        } else {
          ElMessage.error('登录失败')
        }
      })
    },
    onRegis() {
      router.push('/regis')
    },
    // 重置输入
    onReset() {
      this.loginForm.uName = ''
      this.loginForm.uPwd = ''
    },
    changeInput(index) {
      this.list.map((v, i) => {
        v.isCheck = i === index;
      })
    },
    onRetrieval() {
      router.push('/retrieval')
    },
    test() {
      this.list.map((v, i) => {
        if (v.isCheck) {
          console.log('被选中的值为:' + v.value)
        }
      })
    },
  },
  mounted() {
    document.body.style.backgroundSize = '100%'
    document.body.style.backgroundImage = this.loginBg
  },
  beforeUnmount() {
    document.body.style.backgroundImage = ''
  }
}
</script>

<style scoped>
.login-box {
  border: 1px solid #DCDFE6;
  width: 350px;
  margin: 120px auto;
  padding: 35px 35px 15px 35px;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  box-shadow: 0px 0 25px black;
  background-color: white;
}

.login-title {
  text-align: center;
  margin: 0 auto 30px auto;
  color: #303133;
}

/deep/ .el-form-item__label {
  font-size: 18px;
  color: black;
}
</style>

